<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Title}} - 文章详情</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .article-item {
            border-bottom: 1px solid #eee;
            padding: 15px 0;
        }

        .article-item:last-child {
            border-bottom: none;
        }

        .article-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .article-content {
            color: #666;
            line-height: 1.5;
        }

        .article-meta {
            font-size: 12px;
            color: #999;
            margin-top: 8px;
        }

        .nav {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 20px;
            font-size: 20px;
        }

        .nav a {
            color: #333;
            text-decoration: none;
            transition: color 0.3s ease;
            background-color: #eee;
            padding: 10px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-right: 20px;
        }

        .nav a:hover {
            color: #fff;
            background-color: #007bff;
        }

        .price-item {
            border-bottom: 1px solid #eee;
            padding: 15px 0;
        }

        .price-item:last-child {
            border-bottom: none;
        }

        .price-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .price-content {
            color: #666;
            line-height: 1.5;
        }

        .price-meta {
            font-size: 12px;
            color: #999;
            margin-top: 8px;
        }
    </style>
</head>

<body class="bg-gray-50 min-h-screen">
    <div class="container">
        <header>
            <h1>GO Demo</h1>
            <p class="text-gray-600">
                Gin框架 + 模版静态 + API +
                WebSocket + 聊天 + 实时价格盘
            </p>

            <div class="nav">
                <a href="/">首页</a>
                <a href="/art">文章</a>
                <a href="/chat">聊天</a>
                <a href="/price">金价</a>
            </div>
        </header>


        <!-- 主体内容 -->
        <main class="py-8">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col lg:flex-row gap-8">
                    <!-- 文章内容区 -->
                    <article class="lg:w-3/4 bg-white rounded-xl shadow-sm p-6">
                       <!-- 文章头部 -->
<header class="mb-8">
    <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{{.article.Title}}</h1>
    
    <!-- 文章元数据 -->
    <div class="flex items-center text-sm text-gray-500 mb-6">
    </div>
</header>

<!-- 文章正文 -->
<div class="prose prose-custom">
    {{.article.Content}}
</div>

                        <!-- 文章元数据 -->
                        <footer class="mt-12 pt-8 border-t border-gray-200">
                            <div class="flex flex-col md:flex-row justify-between items-center">
                                <div class="flex items-center mb-4 md:mb-0">
                                    <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
                                        <i class="fas fa-user text-gray-500"></i>
                                    </div>
                                    <div class="ml-4">
                                        <p class="font-medium text-gray-900">
                                    </div>
                                </div>

                                <div class="flex space-x-4">
                                    <button class="p-2 text-gray-500 hover:text-blue-600 transition-colors" title="点赞">
                                        <i class="fas fa-thumbs-up"></i>
                                       
                                    </button>

                                    <button class="p-2 text-gray-500 hover:text-blue-600 transition-colors" title="分享">
                                        <i class="fas fa-share-alt"></i>
                                    </button>

                                    <button class="p-2 text-gray-500 hover:text-blue-600 transition-colors" title="收藏">
                                        <i class="fas fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </footer>
                    </article>

                </div>
            </div>
        </main>

    </div>

    <script>
       
    </script>
</body>

</html>